/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/9/21 8:09 下午
 * @version V1.0
 */

import React, { useRef } from 'react';
import { Button, Card, Col, Form, Input, InputNumber, message, Row, Select } from 'antd';
import UploadImg from 'components/UploadImg';
import RichText from 'components/RichText';
import { connect, history } from 'umi';

const formItemLayout = {
    labelCol: { span: 5 }, // 左侧label宽度
    wrapperCol: { span: 16 }, // 右侧输入框等的宽度
};
const tailLayout = {
    wrapperCol: { offset: 5, span: 16 },
};
const width = {
    width: '100%',
};

const { Item } = Form;
const { Option } = Select;
const ProductEdit = ({ ProductEditDetail: { productDetail, pcategoryOption, intro, thumbnail, big_images }, dispatch, loading }) => {
    const [form] = Form.useForm();
    form.setFieldsValue({
        shop: productDetail.shop_name,
        pname: productDetail.spec_items[0].pname,
        categoryOption: { key: productDetail.category_id, label: productDetail.category_name },
        original_price: productDetail.spec_items[0].original_price,
        price: productDetail.spec_items[0].price,
        stock: productDetail.spec_items[0].stock,
        origin_place: productDetail.origin_place,
    });
    const refRich = useRef();
    const imgRefT = useRef();
    const imgRefB = useRef();

    const submit = () => {
        const intro = refRich.current.cbRichHtml();
        const thumbnail = imgRefT.current.cbImgRef();
        const big_images = imgRefB.current.cbImgRef();

        if (big_images.length === 0) {
            message.warn('请上传商品详情图片');
            return;
        }
        if (intro === '<p></p>') {
            message.warn('请填写商品介绍');
            return;
        }
        if (thumbnail.length === 0) {
            message.warn('请上传商品图片');
            return;
        }
        form.validateFields().then(async values => {
            const { pname, original_price, price, stock } = values;
            values.id = productDetail._id;
            values.shop_id = productDetail.shop_id;
            values.shop_name = productDetail.shop_name;
            values.category_id = values.categoryOption.key;
            values.category_name = values.categoryOption.label;
            values.big_images = big_images.map(file => file.url);
            values.intro = intro;
            values.spec_items = [{ thumbnail: thumbnail[0].url, pname, original_price, price, stock }];
            delete values.categoryOption;
            delete values.pname;
            delete values.original_price;
            delete values.price;
            delete values.stock;
            dispatch({
                type: 'ProductEditDetail/updateProduct',
                payload: values,
                callback: (res) => {
                    history.push('/product-manage/product/list');
                },
            });
        }).catch(info => {
        });


    };
    if (loading) return null;
    return (
        <Card>
            <Form
                form={form}
                {...formItemLayout}
            >
                <Row>
                    <Col span={8}>
                        <Item
                            label="商品名称"
                            name="pname"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入商品名称"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="所属店铺"
                            name="shop"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input disabled placeholder="请输入商品名称"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="商品分类"
                            name="categoryOption"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Select
                                placeholder="请选择商品分类"
                                labelInValue
                            >
                                {
                                    pcategoryOption.map(item => {
                                        if (item.name === '云牧场') return null;
                                        return <Option key={item.id} value={item.id}>{item.name}</Option>;
                                    })
                                }
                            </Select>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="商品产地"
                            name="origin_place"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入商品产地"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="现价"
                            name="price"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <InputNumber style={width} placeholder="请输入现价"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="原价"
                            name="original_price"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <InputNumber style={width} placeholder="请输入原价"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="库存"
                            name="stock"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <InputNumber style={width} placeholder="请输入库存"/>
                        </Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <Item
                            label="商品图片"
                        >
                            <UploadImg
                                fileListDetail={thumbnail}
                                imgRef={imgRefT}
                                max={1}
                                isCropper={true}
                            />
                        </Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <Item
                            label="详情图片"
                        >
                            <UploadImg
                                fileListDetail={big_images}
                                imgRef={imgRefB}
                                isCropper={true}
                            />
                        </Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <Item
                            label="商品介绍"
                        >
                            <RichText
                                template={intro}
                                refRich={refRich}
                            />
                        </Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <Item {...tailLayout}>
                            <Button type="primary" onClick={submit}>提交</Button>
                        </Item>
                    </Col>
                </Row>
            </Form>
        </Card>
    );
};

export default connect(({ ProductEditDetail, dispatch, loading }) => ({
    ProductEditDetail,
    dispatch,
    loading: loading.effects['ProductEditDetail/getProductDetail'],
}))(ProductEdit);
